import React from "react";
import { Link } from "react-router-dom";

import ChangeCount from "./ChangeCount";

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      body: "This is the home page.",
      count: 1,
    };

    this.handleCountChange = this.handleCountChange.bind(this);
  }

  componentDidMount() {
    console.log(this.state);
  }

  handleCountChange() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.body}</h1>
        <h2>Current Count Number: {this.state.count}</h2>
        <ChangeCount
          handleCountChange={this.handleCountChange}
          count={this.state.count}
        ></ChangeCount>
        <Link to="/about">About</Link>
        <Link to="/store">Store</Link>
      </div>
    );
  }
}
